<script setup>
// 1.导入use方法
import { useCounterStore } from '@/stores/counter';
import { storeToRefs } from 'pinia';
import { onMounted } from 'vue';


// 执行方法得到store, store里面有数据和方法
const counterStore = useCounterStore()
// console.log(counterStore);


// 直接结构赋值（响应式丢失）
// const { count, doubleCount } = counterStore

// storeToRefs保持响应式结构
// 使用storeToRefs包裹之后结构保持响应式
const { count, doubleCount } = storeToRefs(counterStore)

// 方法直接从原来的counterStore中结构赋值
const {increment} = counterStore


// 调用异步action
onMounted(() => {
  counterStore.loadList()
})

</script>


<template>
  <!-- <button @click="counterStore.increment">计数</button>
  {{ counterStore.count }}
  {{ counterStore.doubleCount }} -->


  <!-- 测试响应式 -->
   <button @click="increment">增加</button>
  {{ count }}

  <ul>
    <li v-for="item in counterStore.list" :key="item.id">{{ item.name }}</li>
  </ul>
</template>